/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {request} from '../../../globalLib';
import {Button, ConfigProvider, Message, Pagination, Table} from '@alifd/next';
import {HEALTHY_COLOR_MAPPING} from './constant';
import EditInstanceDialog from './EditInstanceDialog';

@ConfigProvider.config
class InstanceTable extends React.Component {
    static displayName = 'InstanceTable';

    static propTypes = {
        locale: PropTypes.object,
        clusterName: PropTypes.string,
        serviceName: PropTypes.string,
        groupName: PropTypes.string,
    };

    constructor(props) {
        super(props);
        this.editInstanceDialog = React.createRef();
        this.state = {
            loading: false,
            instance: {count: 0, list: []},
            pageNum: 1,
            pageSize: 10,
        };
    }

    componentDidMount() {
        this.getInstanceList();
    }

    openLoading() {
        this.setState({loading: true});
    }

    closeLoading() {
        this.setState({loading: false});
    }

    getInstanceList() {
        const {clusterName, serviceName, groupName} = this.props;
        if (!clusterName) return;
        const {pageSize, pageNum} = this.state;
        request({
            url: 'v1/ns/catalog/instances',
            data: {
                serviceName,
                clusterName,
                groupName,
                pageSize,
                pageNo: pageNum,
            },
            beforeSend: () => this.openLoading(),
            success: instance => this.setState({instance}),
            complete: () => this.closeLoading(),
        });
    }

    openInstanceDialog(instance) {
        this.editInstanceDialog.current.getInstance().show(instance);
    }

    switchState(index, record) {
        const {instance} = this.state;
        const {ip, port, ephemeral, weight, enabled, metadata} = record;
        const {clusterName, serviceName} = this.props;
        request({
            method: 'PUT',
            url: 'v1/ns/instance',
            data: {
                serviceName,
                clusterName,
                ip,
                port,
                ephemeral,
                weight,
                enabled: !enabled,
                metadata: JSON.stringify(metadata),
            },
            dataType: 'text',
            beforeSend: () => this.openLoading(),
            success: () => {
                const newVal = Object.assign({}, instance);
                newVal.list[index].enabled = !enabled;
                this.setState({instance: newVal});
            },
            error: e => Message.error(e.responseText || 'error'),
            complete: () => this.closeLoading(),
        });
    }

    onChangePage(pageNum) {
        this.setState({pageNum}, () => this.getInstanceList());
    }

    rowColor = ({healthy}) => ({className: `row-bg-${HEALTHY_COLOR_MAPPING[`${healthy}`]}`});

    render() {
        const {locale = {}} = this.props;
        const {clusterName, serviceName} = this.props;
        const {instance, pageSize, loading} = this.state;
        return instance.count ? (
            < div >
            < Table dataSource = {instance.list}
        loading = {loading}
        getRowProps = {this.rowColor} >
            < Table.Column
        width = {138}
        title = "IP"
        dataIndex = "ip" / >
            < Table.Column
        width = {100}
        title = {locale.port}
        dataIndex = "port" / >
            < Table.Column
        width = {100}
        title = {locale.ephemeral}
        dataIndex = "ephemeral"
        cell = {val
    =>
        `${val}`
    }
        />
        < Table.Column
        width = {100}
        title = {locale.weight}
        dataIndex = "weight" / >
            < Table.Column
        width = {100}
        title = {locale.healthy}
        dataIndex = "healthy"
        cell = {val
    =>
        `${val}`
    }
        />
        < Table.Column
        title = {locale.metadata}
        dataIndex = "metadata"
        cell = {(metadata = {})
    =>
        {
            if (!metadata) return null;
            return Object.keys(metadata).map(k => (
                < p >
                {k} = {metadata[k]}
                < /p>
            )
        )
            ;
        }
    }
        />
        < Table.Column
        title = {locale.operation}
        width = {160}
        cell = {(value, index, record)
    =>
        (
        < div >
        < Button
        type = "normal"
        className = "edit-btn"
        onClick = {()
    =>
        this.openInstanceDialog(record)
    }
    >
        {
            locale.editor
        }
    <
        /Button>
        < Button
        type = {record.enabled ? 'normal' : 'secondary'}
        onClick = {()
    =>
        this.switchState(index, record)
    }
    >
        {
            locale[record.enabled ? 'offline' : 'online']
        }
    <
        /Button>
        < /div>
    )
    }
        />
        < /Table>
        {
            instance.count > pageSize ? (
                < Pagination
                className = "pagination"
            total = {instance.count}
            pageSize = {pageSize}
            onChange = {currentPage
        =>
            this.onChangePage(currentPage)
        }
            />
        ) :
            null
        }
    <
        EditInstanceDialog
        ref = {this.editInstanceDialog}
        serviceName = {serviceName}
        clusterName = {clusterName}
        openLoading = {()
    =>
        this.openLoading()
    }
        closeLoading = {()
    =>
        this.closeLoading()
    }
        getInstanceList = {()
    =>
        this.getInstanceList()
    }
        />
        < /div>
    ) :
        null;
    }
}

export default InstanceTable;
